<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <title></title>
  <style>
    #btn{
      position: absolute;
      top:270px;
      left:0;
      z-index: 100;
    }
    #btn a{
      display:inline-block;
      width:80px;
      height: 35px;
      line-height: 35px;
      background: #ffbd55;
      color:#fff;
      font-size: 14px;
      text-align: center;
    }
    body{
      font-size: 30px;
    }
    #temwrap{
      font-size: 20px;
      font-family: 'arial'
    }
  </style>
</head>
<body style=" color:#000;">
  <div class="temwrap" id="temwrap">
    
  </div><!--end of temwrap-->

  <div id="btn">
    <a href="javascript:;" class="pause">暂停</a>
    <a href="javascript:;" class="continue">继续</a>
    <a href="javascript:;" class="reset">重设</a>
  </div>
   <script src="js/countdown.js"></script> 
  <script>

    var count1= new Countdown(
        {
            canvasId:"temcdowncanvas",
            parentDivId:"temwrap", //父容器的Id,未配置或查找不到的时候则元素插入到body
            startSecs:0,//开始时间 
            endSecs:10,//结束时间
            radius:80,
            lineWidth:12, 
            color:'#7bd551',//进度颜色
            strokeColor:'#e6e6e6',//圆环底色
            shadowBlur:'10', //阴影大小
            shadowColor:"rgba(0,0,0,0.2)", //阴影颜色
            fontSize:'44px',
            fontTxt:'s',
            lineRound:true, //线段的末端是否圆角
            gradual:false, //是否有深色或浅色渐变['deep','tint',false]
            part:[ // time 不在时间范围内时不执行颜色变换
                { 
                  time:7,
                  color:'#ffbd55'
                },
                { 
                  time:3,
                  color:'#ff6b5b'
                }
            ],
            onCountTimes:function(times){
              console.log('正在计时'+times) 
            },
            onCountEnd:function(){
              console.log('计时完成')
            }
        
        }
    );
    count1.startRun();



      document.querySelector('.pause').addEventListener('click',function(){
         count1.isSuspended();  //定时器暂停
      })

      document.querySelector('.continue').addEventListener('click',function(){
        count1.isContinue();  //定时器继续开启
      })

     document.querySelector('.reset').addEventListener('click',function(){
        count1.isResetSecs(5,2);  //定时器重新设置时间 参数为开始时间和结束时间
      })
 
    

  </script>
  </body>
</html>